<!DOCTYPE HTML>

<style>
.columns {
  columns: 3;
  column-fill: auto;
  height: 400px;
  transition: height 20s linear;
  background: lightgrey;
}

.grid {
  display: grid-lanes;
  grid-template-columns: 100px auto 100px;
  border: 1px solid;
  gap: 10px;
}

.grid > * {
  background: cyan;
  height: 20px;
  break-inside: avoid;
}
.grid > :nth-child(4n) {
  background: blue;
  height: 60px;
  break-inside: auto;
}
.grid > :nth-child(5n) {
  background: pink;
  height: 40px;
  break-inside: avoid;
}
</style>

<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='15px')">
<div class=columns>
  <div class="grid">
    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
  </div>
</div>

</body>
</html>
